<template>
    <div ref="chartContainer" class="chart-container"></div>
  </template>
  
  <script>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  
  // 必须按需引入旭日图组件
  import { SunburstChart } from 'echarts/charts';
  import { 
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent
  } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  
  echarts.use([
    SunburstChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer
  ]);
  
  export default {
    name: 'ApacheE',
    setup() {
      const chartContainer = ref(null);
      let chartInstance = null;
  
      // 颜色配置
      const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
      const bgColor = '#2E2733';
      const itemStyle = {
        star5: { color: colors[0] },
        star4: { color: colors[1] },
        star3: { color: colors[2] },
        star2: { color: colors[3] }
      };
  
      // 数据处理逻辑
      const processData = () => {
        const data = [ {
    name: '虚构',
    itemStyle: {
      color: colors[1]
    },
    children: [
      {
        name: '小说',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '疼'
              },
              {
                name: '慈悲'
              },
              {
                name: '楼下的房客'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '虚无的十字架'
              },
              {
                name: '无声告白'
              },
              {
                name: '童年的终结'
              }
            ]
          },
          {
            name: '3☆',
            children: [
              {
                name: '疯癫老人日记'
              }
            ]
          }
        ]
      },
      {
        name: '其他',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '纳博科夫短篇小说全集'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '安魂曲'
              },
              {
                name: '人生拼图版'
              }
            ]
          },
          {
            name: '3☆',
            children: [
              {
                name: '比起爱你，我更需要你'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: '非虚构',
    itemStyle: {
      color: colors[2]
    },
    children: [
      {
        name: '设计',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '无界面交互'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '数字绘图的光照与渲染技术'
              },
              {
                name: '日本建筑解剖书'
              }
            ]
          },
          {
            name: '3☆',
            children: [
              {
                name: '奇幻世界艺术\n&RPG地图绘制讲座'
              }
            ]
          }
        ]
      },
      {
        name: '社科',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '痛点'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '卓有成效的管理者'
              },
              {
                name: '进化'
              },
              {
                name: '后物欲时代的来临'
              }
            ]
          },
          {
            name: '3☆',
            children: [
              {
                name: '疯癫与文明'
              }
            ]
          }
        ]
      },
      {
        name: '心理',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '我们时代的神经症人格'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '皮格马利翁效应'
              },
              {
                name: '受伤的人'
              }
            ]
          },
          {
            name: '3☆'
          },
          {
            name: '2☆',
            children: [
              {
                name: '迷恋'
              }
            ]
          }
        ]
      },
      {
        name: '居家',
        children: [
          {
            name: '4☆',
            children: [
              {
                name: '把房子住成家'
              },
              {
                name: '只过必要生活'
              },
              {
                name: '北欧简约风格'
              }
            ]
          }
        ]
      },
      {
        name: '绘本',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '设计诗'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: '假如生活糊弄了你'
              },
              {
                name: '博物学家的神秘动物图鉴'
              }
            ]
          },
          {
            name: '3☆',
            children: [
              {
                name: '方向'
              }
            ]
          }
        ]
      },
      {
        name: '哲学',
        children: [
          {
            name: '4☆',
            children: [
              {
                name: '人生的智慧'
              }
            ]
          }
        ]
      },
      {
        name: '技术',
        children: [
          {
            name: '5☆',
            children: [
              {
                name: '代码整洁之道'
              }
            ]
          },
          {
            name: '4☆',
            children: [
              {
                name: 'Three.js 开发指南'
              }
            ]
          }
        ]
      }
    ]
  }
 ];
        
        data.forEach(level1Item => {
          level1Item.children.forEach(category => {
            category.children.forEach(starLevel => {
              starLevel.itemStyle = itemStyle[starLevel.name.toLowerCase().replace('☆', '')];
              starLevel.label = { color: bgColor };
              
              if (starLevel.children) {
                starLevel.children.forEach(book => {
                  book.value = 1;
                  book.itemStyle = { ...starLevel.itemStyle, opacity: 1 };
                });
              }
            });
          });
        });
        
        return data;
      };
  
      // 图表配置
      const options = {
        backgroundColor: bgColor,
        color: colors,
        series: [{
          type: 'sunburst',
          center: ['50%', '48%'],
          data: processData(),
          radius: [0, '95%'],
          sort: (a, b) => (a.depth === 1 ? b.value - a.value : a.dataIndex - b.dataIndex),
          label: {
            rotate: 'radial',
            color: bgColor,
            fontSize: 14
          },
          levels: [
            { /* 根层级 */ },
            { 
              r0: 0,
              r: '40%',
              label: { rotate: 0 }
            },
            { 
              r0: '40%',
              r: '85%',
              itemStyle: { borderWidth: 2 }
            },
            {
              r0: '85%',
              r: '95%',
              label: { 
                position: 'outside',
                padding: 5,
                silent: true
              },
              itemStyle: { opacity: 0.5 }
            }
          ]
        }]
      };
  
      // 生命周期
      onMounted(() => {
        if (!chartContainer.value) return;
        chartInstance = echarts.init(chartContainer.value);
        chartInstance.setOption(options);
      });
  
      onBeforeUnmount(() => {
        chartInstance?.dispose();
      });
  
      return { chartContainer };
    }
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 800px;
    height: 600px;
  }
  </style>